<template>
  <section class="app-inner">
    <el-card class="header-card">
      <el-form :inline="true" ref="deviceForm" class="wrapper" :model="queryParams">
        <el-form-item>
          <!-- :class="addFlag ? 'active' : 'lose'" :disabled="!addFlag" -->
          <!--          <el-button type="primary" @click="handleAdd">新增设备</el-button>-->
          <!--          <el-button type="primary" @click="downFile">下载模板</el-button>-->
          <!--          <el-upload-->
          <!--            style="display: inline; margin-left: 10px"-->
          <!--            :show-file-list="false"-->
          <!--            action="no"-->
          <!--            :before-upload="beforeUpload"-->
          <!--            :http-request="importExcel"-->
          <!--          >-->
          <!--            <el-button type="primary" icon="import">批量导入</el-button>-->
          <!--          </el-upload>-->
          <!-- <el-button type="primary" @click="handleSynchro">批量导入</el-button> -->
        </el-form-item>
        <div class="searchRight">
          <!-- 一级类型 -->
          <!--          <el-form-item>-->
          <!--            <el-select clearable filterable-->
          <!--                       v-model="queryParams.eqptTypeId"-->
          <!--                       @change="changeOneType"-->
          <!--                       placeholder="全部一级类型">-->
          <!--              <el-option-->
          <!--                v-for="item in deviceOneTypeList"-->
          <!--                :key="item.typeId"-->
          <!--                :label="item.typeName"-->
          <!--                :value="item.typeId"-->
          <!--              ></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->

          <!--          <el-form-item>-->
          <!--            <el-select clearable filterable v-model="queryParams.twoType" placeholder="全部二级类型">-->
          <!--              <el-option-->
          <!--                v-for="item in deviceTwoTypeList"-->
          <!--                :key="item.typeId"-->
          <!--                :label="item.typeName"-->
          <!--                :value="item.typeId"-->
          <!--              ></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-input clearable placeholder="请输入设备编号" v-model="queryParams.deviceNo"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input clearable placeholder="请输入设备地点" v-model="queryParams.deviceAddress"></el-input>
          </el-form-item>
          <el-form-item class="searchBtn">
            <el-button type="primary" @click="searchQuery">查询</el-button>
          </el-form-item>
        </div>
        <!-- <el-form-item label="设备名称">
          <el-input clearable placeholder="请输入设备名称" v-model="queryParams.eqptName"></el-input>
        </el-form-item> -->

        <!-- <el-form-item label="设备类型" prop="eqptTypeId">
          <el-select v-model="queryParams.eqptTypeId" placeholder="请选择设备类型" @change="deviceTypeChange">
            <el-option
              v-for="item in deviceTypeList"
              :key="item.eqptTypeId"
              :label="item.eqptType"
              :value="item.eqptTypeId"
            ></el-option>
          </el-select>
        </el-form-item> -->

        <!-- <el-form-item label="设备品名">
          <el-select v-model="queryParams.judgeIds" placeholder="请选择设备品名"  @change="deviceNameChange" clearable>
            <el-option
              v-for="item in productNameList"
              :key="item.judgeId"
              :label="item.prductName"
              :value="item.judgeId"
            ></el-option>
          </el-select>
        </el-form-item> -->

        <!-- <el-form-item label="供应商名称">
          <el-input clearable placeholder="请输入供应商名称" v-model="queryParams.supplierName"></el-input>
        </el-form-item> -->

        <!-- <el-form-item style="width: 300px"> -->
        <!-- <el-button type="primary" @click="searchQuery" style="margin-left:30px;">查询</el-button> -->
        <!-- <el-button type="primary" @click="handleSynchro">刷新</el-button> -->
        <!-- :class="addFlag ? 'active' : 'lose'" -->
        <!-- <el-button type="primary" @click="handleAdd" :class="addFlag ? 'active' : 'lose'" :disabled="!addFlag">新增</el-button> -->
        <!-- <div class="tip-btn">
          <div class="tip-con" @click="tipClick">
            <span>操作提示</span>
            <span class="icon-question">?</span>
          </div>
        </div> -->
        <!-- </el-form-item> -->
      </el-form>
    </el-card>

    <el-card class="table-card">
      <el-table :data="tableData" style="width: 100%" row-key="userNo">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="deviceNo" label="设备编号"></el-table-column>
        <!--        <el-table-column prop="firstLevelName" label="设备类型一级"></el-table-column>-->
        <!--        <el-table-column prop="secondLevelName" label="设备类型二级"></el-table-column>-->
        <el-table-column prop="deviceName" label="设备名称"></el-table-column>
        <!--        <el-table-column prop="supplierName" label="供应商"></el-table-column>-->
        <el-table-column prop="deviceAddress" label="地点"></el-table-column>
        <el-table-column prop="typeName" label="标签"></el-table-column>

        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDetail(scope.row)">查看</el-button>
            <!--            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>-->
            <!--            <el-button type="text" size="small" @click="handleRemove(scope.row)">删除</el-button>-->
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        v-if="tableData.length > 0"
        style="text-align: right"
        layout="total, prev, pager, next"
        @current-change="pageHandleChange"
        :current-page="queryParams.current"
        :page-size="queryParams.pageSize"
        :total="totalPageNum"
      ></el-pagination>
    </el-card>

    <!--
      :checkList="checkList"
      :deviceTypeList="deviceTypeList"

     -->
    <maintain-modal
      v-if="dialogVisible"
      :eqptNo="eqptNo"
      ref="userModal"
      @ok="userModalOk"
    ></maintain-modal>
    <readMaintain ref="readDetail"></readMaintain>

    <el-dialog title="详情" :visible.sync="detailShow" center top="18vh" width="700px">
      <el-descriptions :column="2" class="left">
        <el-descriptions-item label="设备编号">{{ model.deviceNo || '--' }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ model.deviceName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="地点">{{ model.deviceAddress || '--' }}</el-descriptions-item>
        <el-descriptions-item label="标签">{{ model.typeName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="经度">{{ model.longitude || '--' }}</el-descriptions-item>
        <el-descriptions-item label="维度">{{ model.latitude || '--' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </section>
</template>

<script>
import MaintainModal from './components/MaintainModal'
import readMaintain from './components/readMaintain'
import {
  getEquipmentListOne,
  getDeviceTypeList,
  delEqptData,
  downDeviceTemplate,
  importDevice
//   getEqptType,
//   getEqptTitle,
//   pullEqptData,
//   getProductNameList
} from '@/views/children/safety/js/device'

export default {
  name: 'DeviceMaintain',
  components: { MaintainModal, readMaintain },
  data() {
    return {
      detailShow: false,
      model: {},
      dialogVisible: true,
      currentPage: 1,
      pageSize: 10,
      addFlag: false,
      totalPageNum: 0,
      // queryParams: {
      //   eqptTypeId: '',
      //   judgeIds: ''
      // },
      queryParams: {
        current: 1, //  当前页
        pageSize: 10, // 单页数量
        deviceAddress: '',
        deviceNo: ''
        // eqptIds: [], // 设备id   ?
        // eqptName: '', // 设备名称
        // eqptTypeId: '', // 设备类型id
        // floorId: '', // 楼层id
        // floorName: '', // 楼层名称
        // sourceId: '', //  供应商设备id
        // supplierName: ''// 供应商名称，
        // areaId: '', // 区域id   ?
        // areaName: '', // 区域名称  ?
        // buildId: '', // 楼宇id  ?
        // buildName: '', // 楼宇名称   ?
      },
      twoType: '',
      judgeIdArr: [],
      deviceOneTypeList: [], // 设备一级类型
      deviceTwoTypeList: [],
      tableData: [],
      eqptNo: '',
      // rules: {
      //   eqptTypeId: [{ required: true, message: '请选择设备类型', trigger: 'change' }]
      // },
      // checkList: [], // 多选框组
      // checkedTitles: [], // 多选框组绑定的值
      productNameList: []
    }
  },
  computed: {
    // tableTitle () {
    //   return this.checkList.filter(e => e.checked)
    // }
    // 有问题
    // addBtnDisabled () {
    //   let judgeIds = this.queryParams.judgeIds
    //   let productNameList = this.productNameList
    //   return judgeIds.length === 1 && productNameList.filter(e => e.judgeId === judgeIds[0])[0].sourceFlag === 1
    // }
  },
  created() {
    // this.getEqptType()
    this.init(this.queryParams) // 获取
    this.getDeviceTypeList()
  },
  methods: {
    // 查询按钮
    searchQuery() {
      let params = {
        ...this.queryParams
      }
      if (this.queryParams.twoType) {
        params.eqptTypeId = this.queryParams.twoType
      }
      delete params.twoType
      this.queryParams.current = 1
      this.init(params)
    },

    // 获取设备信息
    async init(params) {
      try {
        delete params.twoType
        let res = await getEquipmentListOne(params)
        if (res.code === 0) {
          this.tableData = res.data.records
          this.totalPageNum = res.data.total
        } else {
          this.$message.warning(res.msg)
        }
      } catch (e) {
      }
    },
    // 获取设备一级类型下拉列表数据
    async getDeviceTypeList() {
      try {
        const params = {
          typeLevel: 1, // 类型名称
          typeParentId: '' // 父类型id
        }
        let res = await getDeviceTypeList(params)
        if (res.code === 0) {
          this.deviceOneTypeList = res.data
        } else {
          this.$message.warning(res.msg)
        }
      } catch (e) {
      }
    },

    // 获取设备二级类型下拉框数据
    async changeOneType(val) {
      console.log(val)
      try {
        const params = {
          typeLevel: 2, // 类型名称
          typeParentId: val // 父类型id
        }
        let res = await getDeviceTypeList(params)
        if (res.code === 0) {
          this.deviceTwoTypeList = res.data
        }
      } catch (e) {
      }
    },
    // 获取设备信息
    // async initData () {
    //   const params = {
    //     ...this.queryParams,
    //     current: this.currentPage,
    //     pageSize: this.pageSize,
    //     judgeIds: this.judgeIdArr,
    //     tenantNo: localStorage.getItem('tenantNo')
    //   }
    //   const { code, data, msg } = await getEquipmentListOne(params)
    //   if (code === 0) {
    //     console.log(data)
    //     this.tableData = data.records
    //     this.totalPageNum = data.total
    //   } else {
    //     this.$message.warning(msg)
    //   }
    // },

    // 获取设备类型
    // async getEqptType () {
    //   const { data } = await getEqptType()
    //   this.deviceTypeList = data
    //   if (data && data.length) {
    //     this.queryParams.eqptTypeId = data[0].eqptTypeId
    //     this.getProductNameList()
    //     this.deviceTypeChange()
    //   }
    // },

    // 获取设备品名
    // async getProductNameList () {
    //   const params = {
    //     eqptTypeId: this.queryParams.eqptTypeId
    //   }
    //   const { code, data } = await getProductNameList(params)
    //   if (code === 0) {
    //     this.productNameList = data
    //   }
    // },

    // 设备类型改变
    // async deviceTypeChange (val) {
    //   this.productNameList = []
    //   this.queryParams.judgeIds = ''
    //   if (val) await this.getProductNameList()

    //   this.checkedTitles = []
    //   // let judgeId = this.queryParams.eqptTypeId
    //   const params = {
    //     eqptTypeId: this.queryParams.eqptTypeId,
    //     tenantNo: localStorage.getItem('tenantNo')
    //   }
    //   const { code, data, msg } = await getEqptTitle(params)
    //   if (code === 0) {
    //     // console.log(data)
    //     let record = data.filter(e => e.displayFlag === '1')
    //     // console.log(record)
    //     record.forEach((e, i) => {
    //       if (i < 3) {
    //         e.checked = true
    //         this.checkedTitles.push(e.cloumnKey)
    //       } else {
    //         e.checked = false
    //       }
    //     })
    //     this.checkList = record
    //     // console.log(this.checkList)
    //     this.initData()
    //   } else {
    //     this.$message.error(msg)
    //   }
    // },

    // 设备品名的改变
    // deviceNameChange (val) {
    //   if (val !== '') {
    //     this.judgeIdArr = [val]
    //     let productNameList = this.productNameList
    //     let selected = productNameList.filter(item => item.judgeId === val)
    //     if (selected.length > 0) {
    //       this.addFlag = selected[0].sourceFlag === '1'
    //     }
    //   } else {
    //     this.queryParams.judgeIds = ''
    //     this.judgeIdArr = []
    //     this.addFlag = false
    //   }
    //   console.log(this.addFlag)
    // },
    // 刷新按钮
    // async handleSynchro () {
    //   const params = {
    //     eqptTypeId: this.queryParams.eqptTypeId,
    //     tenantNo: localStorage.getItem('tenantNo'),
    //     userNo: JSON.parse(localStorage.getItem('Standard__User-Info')).value.userNo
    //   }
    //   try {
    //     const { code, msg } = await pullEqptData(params)
    //     if (code === 0) {
    //       this.$message.warning('刷新成功')
    //     } else {
    //       this.$message.warning(msg)
    //     }
    //   } catch (e) {}
    // },

    // 新增按钮
    handleAdd() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.userModal.add()
      })
    },
    // 查看详情
    handleDetail(row) {
      // this.$refs.readDetail.add(row)
      this.model = {...row}
      this.detailShow = true
    },
    // 用户编辑
    handleEdit(row) {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.userModal.edit(row)
      })
    },

    // 用户删除
    handleRemove(row) {
      this.$confirm('确定删除该设备吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let result = await delEqptData(row.eqptId)
        if (result.code === 0) {
          this.$message.success('删除成功！')
          this.queryParams.current = 1
          await this.init(this.queryParams)
        } else {
          this.$message.error(result.msg + '删除失败！')
        }
      })
    },

    // 用户CU弹框回调
    userModalOk() {
      // this.queryParams.current = 1
      this.init(this.queryParams)
      this.$message.success('保存成功')
    },

    // 页码改变
    pageHandleChange(page) {
      this.queryParams.current = page
      // this.initData()
      this.init(this.queryParams)
    },

    // 提示
    // tipClick () {
    //   let html = `
    //   <ul>
    //     <li>1. 设备分为供应商设备及自定义设备两种。</li>
    //     <li>2. 供应商设备可使用刷新功能获取最新设备信息；</li>
    //     <li>3. 如要新增自定义设备需要先选择设备品名。</li>
    //   </ul>`
    //   this.$confirm(html, '操作提示', {
    //     customClass: 'customConfirm',
    //     type: 'info',
    //     center: true,
    //     showCancelButton: false,
    //     dangerouslyUseHTMLString: true
    //   })
    //     .then(() => {})
    //     .catch(() => {})
    // }
    // 下载模板
    async downFile() {
      try {
        let res = await downDeviceTemplate()
        if (res.code === 0) {
          this.$message.success('下载中')
        }
      } catch (e) {
      }
    },
    // 导入前的验证
    beforeUpload(file) {
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 200
      if (!extension && !extension2) {
        this.$message.warning('上传模板只能是 xls、xlsx格式!')
        return false
      } else if (!isLt2M) {
        this.$message.warning('上传模板大小不能超过 5MB!')
        return false
      } else {
        return true
      }
    },
    // EXCEL导入
    importExcel(file, fileList) {
      let headFile = file.file
      let formData = new FormData()
      formData.append('file', headFile)
      importDevice(formData).then((res) => {
        let query = {
          current: 1,
          pageSize: 10
        }
        this.init(query)
        this.$message.success('导入成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  .table-btn {
    margin-bottom: 15px;
    text-align: right;
  }
}

.no-hava {
  text-align: center;
  color: #cccccc;
}

.add-btn {
  margin-left: 10px;
}

.lose {
  background: #c8c9cc !important;
  cursor: not-allowed;
}

.tip-btn {
  margin-left: 15px;
  cursor: pointer;
  display: inline-block;

  span {
    font-size: 16px;
  }

  &:hover {
    color: #ff0000;

    .icon-question {
      border: 1px solid #ff0000;
    }
  }

  .tip-con {
    display: flex;
    align-items: center;
  }

  .icon-question {
    margin-left: 2px;
    width: 18px;
    height: 18px;
    border: 1px solid #333333;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
<style lang="scss">
.customConfirm {
  width: 480px;

  .el-message-box__content {
    text-align: left;
    padding: 20px 26px 26px 46px;

    li {
      height: 32px;
      line-height: 32px;
    }
  }
}

.searchRight {
  float: right;
}
</style>
